import React, { useMemo } from 'react'
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import ErrorPage from "./error";
import Index from './pages/app';
import Blog from './pages/blog';
import Login from './pages/login';
import FilesList from './pages/filelist';
import Practice from './pages/practice';
import BlogList from './pages/bloglist';
import Admin from './pages/about';
import BlogPreview from './pages/blogpreview';

export default function App() {
  const router = useMemo(() => {
    return createBrowserRouter([
      {
        path: "/",
        element: <Index />,
        errorElement: <ErrorPage />,
        children: [
          {
            path: "bloglist",
            element: <BlogList />,
          },
          {
            path: "blog",
            element: <Blog />,
          },
          {
            path: "login",
            element: <Login />,
          },
          {
            path: "files",
            element: <FilesList />,
          },
          {
            path: "practice",
            element: <Practice />,
          },
          {
            path: "/blog/:id",
            element: <BlogPreview />,
          },
          {
            path: "admin",
            element: <Admin />,
          },
        ],
      },
    ])
  }, [])
  return (
    <RouterProvider router={router} />
  )
}
